<!--数据报告-->
<template>
  <div class="report custom-commonBox">
    <!-- <preview></preview> -->
    <div class="commonTitleBox">
      <span class="commonHeaderTitle">数据报告</span>
    </div>
    <div class="content">
      <el-form ref="formData" :model="formData" label-width="100px">
        
        <el-form-item label="数据类型：">
          <el-radio-group v-model="datatype" @change="initData">
            <el-radio label="cycle">周期报告</el-radio>
            <el-radio label="time">观测时刻记录</el-radio>
            <el-radio label="data">监测数据记录</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="报告周期：" v-if="datatype == 'cycle'">
          <el-select
            style="width: 200px"
            v-model="formData.period"
            placeholder="请选择"
          >
            <el-option value="day" label="日报"></el-option>
            <el-option value="week" label="周报"></el-option>
            <el-option value="month" label="月报"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测因素：">
          <el-cascader
            style="width: 200px; display: inline-block"
            @change="getPointList"
            placeholder="请选择"
            clearable
            v-model="formData.factors"
            :options="factorList"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="测点名称：">
          <el-select
            style="width: 200px"
            v-model="formData.pointId"
            :collapse-tags="true"
            filterable
            clearable
            multiple
            @change="selectAll = false"
          >
          <!-- <el-option value='all'  v-if="pointList.length>0">全部</el-option> -->
            <el-option
              v-for="(item, index) in pointList"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-checkbox class="ml10" @change="selectAllCheck"  v-model="selectAll">全选</el-checkbox >
        </el-form-item>
        <el-form-item
          label="时间范围："
          v-if="(datatype == 'time' || datatype == 'data')&&clear"
        >
          <datatime
            ref="date3"
            type="datetime"
            :pointIds="formData.pointId"
            :time="formData.lastTime"
            @changeTime="(time)=>{formData.lastTime = time}"
            placeholderText="请选择开始时间"
            style="width:200px;display: inline-block;"
            class="mr5"
          />-
          <datatime
            ref="date4"
            type="datetime"
            :pointIds="formData.pointId"
            :time="formData.thisTime"
            @changeTime="(time)=>{formData.thisTime = time}"
            placeholderText="请选择结束时间"
            style="width:200px;display: inline-block;"
            class="ml5"
          />
        </el-form-item>
        <el-form-item label="上次时间：" v-if="datatype == 'cycle'">
          <datatime
            ref="date1"
            type="datetime"
            :pointIds="formData.pointId"
            :time="formData.lastTime"
            @changeTime="(time)=>{formData.lastTime = time}"
            placeholderText="请选择上次时间"
            style="width:200px;display: inline-block;"
          />
        </el-form-item>
        <el-form-item label="本次时间：" v-if="datatype == 'cycle'">
          <datatime
            ref="date2"
            type="datetime"
            :pointIds="formData.pointId"
            :time="formData.thisTime"
            @changeTime="(time)=>{formData.thisTime = time}"
            placeholderText="请选择本次时间"
            style="width:200px;display: inline-block;"
          />
        </el-form-item>
        <el-form-item
          label="取均值："
          v-if="datatype == 'cycle' || datatype == 'data'"
        >
          <el-radio-group v-model="formData.average">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button class="queryBtn" type="primary" @click="queryData">生成</el-button>
      </el-form>

      <div class="fileListBox">
        <div class="fileList" v-for="item in fileList[datatype]" :key="item">
          <div class="fileListTop center-float-left">
            <img src="/static/imgs/filepic/excel.png" alt="" />
            <div class="fileListTitle">{{item.name}}</div>
          </div>
          
          <div v-if='item.status==1' class="fileListBtn">
            <!-- 20220802 -->
            <!-- <el-button type="text" @click="preview(item)">预览</el-button> -->  
            <el-button type="text" @click="downLoad(item)">下载</el-button>
          </div>
          <div v-if='item.status==0' class="fileListLoading"><i class="el-icon-loading"></i>报告生成中…</div>
        </div>
      </div>
    </div>
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="预览" @close="dialogVisible = false">
      <div class="previewBox" v-if='dialogVisible'>
        <Preview :url='preFileUrl'></Preview>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Preview from './dialog/preview.vue';
import { util } from "@/utils/common.js";

export default {
  data() {
    return {
      clear:true,
      preFileUrl:'',
      dialogVisible:false,
      datatype: "cycle",
      factorList: [],
      pointList: [],
      formData: {
        period: 'day',
        lastTime: "",
        thisTime: "",
        factors: "",
        pointId: [],
        average: 1,
        factorId: "",
        relateParamId: "",
      },
      allPointList:[],
      selectAll:false,
      fileList:{
        cycle:[],
        time:[],
        data:[],
      },
    };
  },
  components: {
    Preview
  },
  watch: {
    projectInfo() {
      if (this.projectInfo.id) {
        this.initData()
        this.getFactorList()
      }
    },
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["projectInfo"]),
  },
  mounted() {
    this.getFactorList()
  },
  methods: {
    selectAllCheck(){
      if(this.selectAll){
        // debugger
        console.log(this.formData.pointId)
        this.formData.pointId = this.allPointList
        console.log(this.formData.pointId)
      }else{
        this.formData.pointId = []

      }
    },
    getImgSrc(data){
      if(data.type == 0){
        return src = 'static/imgs/filepic/folder.png'
      }
      let fileType = util.getFileInfo(data.location).type
      let src = 'static/imgs/filepic/other.png'
      switch(fileType){
        case 'xls':
        case 'xlsx':
          src = 'static/imgs/filepic/excel.png'
          break
        case 'doc':
        case 'docx':
          src = 'static/imgs/filepic/word.png'
          break
        case 'pdf':
          src = 'static/imgs/filepic/pdf.png'
          break
        case 'ppt':
          src = 'static/imgs/filepic/ppt.png'
          break
        case 'txt':
          src = 'static/imgs/filepic/txt.png'
          break
        case 'rar':
        case 'zip':
        case '7z':
          src = 'static/imgs/filepic/zip.png'
          break;
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
          src = util.imgBaseUrl + (data.thumbnail? data.thumbnail : data.location)
          break
        default:
          src = 'static/imgs/filepic/other.png'
          break
      }
      return src
    },
    initData(){
      this.clear = false
      this.formData.period= 'day'
      this.formData.lastTime= ''
      this.formData.thisTime= ''
      this.formData.average= 1
      this.formData.pointId= []
      this.selectAll = false
      setTimeout(()=>{
        this.clear = true

      },10)
    },
    queryData(){
      if(this.formData.pointId.length==0){
        this.$message({
            type:'warning',
            message:'请选择测点'
        })
        return
      }
      if(this.formData.thisTime&&this.formData.thisTime!=''){
        if(new Date(this.formData.thisTime).getTime()< new Date(this.formData.lastTime).getTime()){
          this.$message({
              type:'warning',
              message:'开始时间请小于结束时间'
          })
          return

        }

      }
      if(this.datatype=='cycle'){
        
        this.fileList.cycle=[{
          url:'/pictures/tsy/report/周期报告.xlsx',
          name:'周期报告记录',
          status:0
        }]
        // 查询周期报告
        let query = {
          period:this.formData.period,
          factorId: this.formData.factorId,
          pointIds: this.formData.pointId,
          endTime:this.formData.thisTime||'',
          startTime:this.formData.lastTime||'',
          needAvg:this.formData.average==1
        }
        this.$httpProj.post("/report/report/period",query).then((res) => {
          if(res.data){
            this.fileList.cycle[0].status=1
            this.fileList.cycle[0].url=res.data

          }else{
            this.$message({
              type:'warning',
              message:res.message
            })
            this.fileList.cycle=[]
          }
        }).catch(()=>{
            this.fileList.cycle=[]

        })

      }
      else if(this.datatype=='time'){
        
        this.fileList.time=[{
          url:'/pictures/tsy/report/观测时刻记录.xlsx',
          name:'观测时刻记录',
          status:0
        }]
        // 查询观测时刻记录报表
        let query = {
          factorId: this.formData.factorId,
          pointIds: this.formData.pointId,
          endTime:this.formData.thisTime||'',
          startTime:this.formData.lastTime||'',
        }
        this.$httpProj.post("/report/report/time",query).then((res) => {
          if(res.data){
            this.fileList.time[0].status=1
            this.fileList.time[0].url=res.data

          }else{
            this.$message({
              type:'warning',
              message:res.message
            })
            this.fileList.time=[]
          }
        }).catch(()=>{
            this.fileList.time=[]
        })

      }
      else if(this.datatype=='data'){
        
        this.fileList.data=[{
          url:'/pictures/tsy/report/观测数据记录.xlsx',
          name:'观测数据记录',
          status:0
        }]
        // 查询监测记录报表
        let query = {
          factorId: this.formData.factorId,
          pointIds: this.formData.pointId,
          needAvg:this.formData.average==1,
          endTime:this.formData.thisTime||'',
          startTime:this.formData.lastTime||'',
        }
        this.$httpProj.post("/report/report/point",query).then((res) => {
          if(res.data){
            this.fileList.data[0].status=1
            this.fileList.data[0].url=res.data

          }else{
            this.$message({
              type:'warning',
              message:res.message
            })
            this.fileList.data=[]
          }
        }).catch(()=>{
            this.fileList.data=[]
        })
      }

    },
    preview(item){
      this.preFileUrl = item.url
      this.dialogVisible = true
    },
    downLoad(item){
      console.log(item,'_blank')
      let url = util.fileBaseUrl+item.url
      window.open(url,'_blank')
    },
    getFactorList() {
      this.factorList = [];
      this.formData.pointId= []
      this.$httpProj.get("/point/factor/getFactorsAndPoints").then((res) => {
        res.data.forEach((item, index) => {
          item.label = item.name;
          item.value = index;
          item.leaf = true;
          if (!item.relateParams) {
            item.leaf = true;
          } else if (item.relateParams) {
            item.children = [];
            item.leaf = false;
            item.relateParams.forEach((it, idx) => {
              item.children.push({
                label: it.name,
                value: idx,
                leaf: true,
              });
            });
          }
        });
        this.factorList = res.data;
        if (this.factorList.length > 0) {
          if (!this.factorList[0].relateParams) {
            this.formData.factors = [0];
          } else {
            this.formData.factors = [0, 0];
          }
          this.getPointList();
          //this.queryData()
        }
      });
    },
    getPointList() {
      this.pointList = [];
      if (this.formData.factors.length == 2) {
        this.formData.factorId = this.factorList[this.formData.factors[0]].relateParams[this.formData.factors[1]].factorId;
        this.pointList = this.factorList[this.formData.factors[0]].relateParams[this.formData.factors[1]].points;
        this.formData.relateParamId = this.factorList[this.formData.factors[0]].relateParams[this.formData.factors[1]].id;
        this.allPointList= this.pointList.map((it)=>it.id)
      } else if (this.formData.factors.length == 1) {
        this.formData.factorId = this.factorList[this.formData.factors[0]].id;
        this.pointList = this.factorList[this.formData.factors[0]].points;
        this.formData.relateParamId = "";
        this.allPointList= this.pointList.map((it)=>it.id)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.light-theme .content{
  background: #fff;
}
.content{
  padding: 10px;
}
.queryBtn{
  margin-left: 100px;
}
.fileListBox{
  overflow: hidden;
  padding-top: 20px;
}
.fileList{
  border: 1px solid #eee;
  width: 300px;
  margin-right: 30px;
  float: left;
  padding-top: 10px;
}
.fileListTop{
  border-bottom: 1px solid #eee;
}
.fileListTitle{
  text-overflow: ellipsis;
   overflow: hidden; 
   display: -webkit-box; 
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical; 
}
.fileListLoading{
  text-align: center;
  line-height: 30px;
  color: #1854D1;
}
.fileListBtn{
  text-align: center;
}
.previewBox{
  height: 500px;
  overflow: auto;
}
</style>